<template>
	<view class="list_box">
		<view class="search_relat">
			<view class="search_box">
				<u-search v-model="filterParams.users_id" @search="pageInit" class="search_view" height="56"
					:show-action="false">
				</u-search>
				<view class="iconfont iconfont-e6e9" @click="showVisible = true"></view>
			</view>
		</view>
		<view class="list_item" v-for="(item,index) in dataList" :key="index">
			<view class="row_item">
				<view class="label">家长姓名：</view>
				<view class="val">{{item.parent}}</view>
			</view>
			<view class="row_item">
				<view class="label">孩子姓名：</view>
				<view class="val">{{item.name}}</view>
			</view>
			<view class="row_item">
				<view class="label">联系电话：</view>
				<view class="val">{{item.phone}}</view>
			</view>
			<view class="row_item">
				<view class="label">所属班级：</view>
				<view class="val">{{item.student_class}}</view>
			</view>
			<view class="row_item">
				<view class="label">在家评分：</view>
				<view class="val">
					{{item.score_parent === null?'暂无评分':item.score_parent }}
				</view>
			</view>
			<view class="row_item">
				<view class="label">在校评分：</view>
				<view class="val">
					{{item.score_self_evaluation === null?'暂无评分' : item.score_self_evaluation }}
				</view>
			</view>
			<view class="row_item">
				<view class="label">老师评分：</view>
				<view class="val act" @click="setScollEval(index)">
					{{item.score_teacher === null?'立即评分' : item.score_teacher }}
				</view>
			</view>
		</view>
		<sww-load-more :params="{ ...dataListParams }"></sww-load-more>
		<u-popup v-model="evelVisible" mode="center">
			<view class="scoll_box">
				<view class="scoll_cont">
					<view class="scoll_title">请输入分数：</view>
					<input type="number" class="input_view" v-model="scollVal" />
				</view>
				<view class="btn_box">
					<view class="btn btn_l" @click="evelVisible = false">取消</view>
					<view class="btn" @click="sureSchool">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showVisible" mode="right" width="85%">
			<view class="filter_box">
				<view class="filter_item">
					<view class="fi_label">活动</view>
					<view class="fi_val" @click="actVisible = true">
						<view class="view">{{actObj.name || '请选择活动'}}</view>
						<view class="iconfont iconfont-e775"></view>
					</view>
				</view>
				<view class="filter_item">
					<view class="fi_label">开始时间</view>
					<view class="fi_val" @click="startVisible = true">
						<view class="view">{{filterParams.start_date || '请选择活动开始时间'}}</view>
						<view class="iconfont iconfont-e775"></view>
					</view>
				</view>
				<view class="filter_item">
					<view class="fi_label">结束时间</view>
					<view class="fi_val" @click="endVisible = true">
						<view class="view">{{filterParams.end_date || '请选择活动结束时间'}}</view>
						<view class="iconfont iconfont-e775"></view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="actVisible" v-if="actInit" :list="actList" @confirm="actConfirm" value-name="pk_id"
			label-name="name"></u-select>

		<u-picker start-year="2022" v-model="startVisible" mode="time" :params="timeParams" @confirm="startConfirm">
		</u-picker>
		<u-picker start-year="2022" v-model="endVisible" mode="time" :params="timeParams" @confirm="endConfirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js'
	export default {
		mixins: [pagingMixin],
		props: {
			infoId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				optionIndex: null, // 操作下标
				evelVisible: false,
				scollVal: '', // 在校评分值
				actObj: {
					pk_id: '',
					name: ''
				},
				filterParams: {
					start_date: '',
					end_date: '',
					users_id: ''
				},
				showVisible: false,
				actVisible: false,
				actList: [{
					pk_id: 0,
					name: '无'
				}],
				actInit: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
				},
				startVisible: false,
				endVisible: false
			}
		},
		onLoad(options) {
			this.$loading()
			this.getActList(1)
		},
		onReachBottom() {
			this._load_data()
		},
		methods: {
			getActList(page) {
				this.$GetQueryDataList('b_enroll_info', page, 20, {
					fk_business_id: this.vuex_business.pk_id,
					fk_mechanism_id: this.vuex_adminuser.enroll_id
				}).then((res) => {
					this.actList = this.actList.concat(res.data)
					if (page == 1) {
						this.actObj = {
							...(res.data[0] ? res.data[0] : this.actObj[0])
						}
						this.pageInit()
					}
					let newPage = page + 1
					if (newPage <= res.pageCount) {
						this.getActList(newPage)
					} else {
						this.actInit = true
					}
				})
			},
			pageInit() {
				this._init_data('GetEnrollUsersList', {
					...this.filterParams,
					pk_id: this.actObj.pk_id || null,
					users_id: this.filterParams.users_id || '-1'
				})
			},
			setScollEval(index) {
				if (this.dataList[index].score_teacher === null) {
					this.evelVisible = true
					this.optionIndex = index
				}
			},
			sureSchool() {
				if (this.scollVal > 100) {
					this.$toast('不能超过100分')
					return
				}
				this.$loading()
				this.$UpdateModify('b_enroll_score', {
					pk_id: this.dataList[this.optionIndex].score_pk_id,
					teacher: this.scollVal
				}, {
					isWeb: true
				}).then(() => {
					this.dataList[this.optionIndex].score_teacher = this.scollVal
					this.scollVal = ''
					this.evelVisible = false
					this.$hide()
				})
			},
			// 选择活动
			actConfirm(arr) {
				this.actObj = {
					pk_id: arr[0].value,
					name: arr[0].label
				}
				this.pageInit()
			},
			// 选择时间
			startConfirm(e) {
				this.filterParams.start_date = e.year + '/' + e.month + '/' + e.day + ' ' + e.hour + ':' + e.minute
				this.pageInit()
			},
			endConfirm(e) {
				this.filterParams.end_date = e.year + '/' + e.month + '/' + e.day + ' ' + e.hour + ':' + e.minute
				this.pageInit()
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $www-theme-bg;
	}
</style>
<style lang="scss" scoped>
	.search_relat {
		height: 90rpx;

		.search_box {
			background-color: #fff;
			position: fixed;
			height: 90rpx;
			padding-left: 20rpx;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;

			.search_view {
				flex: 1;
				overflow: hidden;
			}

			.iconfont {
				font-size: 32rpx;
				padding: 0 22rpx;
			}
		}
	}


	.list_box {
		.list_item {
			background-color: #fff;
			margin: 20rpx 20rpx;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			display: flex;
			flex-wrap: wrap;

			.row_item {
				padding: 6rpx 0;
				font-size: 24rpx;
				width: 50%;
				display: flex;

				.val {
					flex: 1;
					overflow: hidden;
					color: #999;

					&.act {
						color: #2440C4;

						&:active {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}

	.scoll_box {
		.scoll_title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.scoll_cont {
			padding: 30rpx 40rpx 0;


			.input_view {
				min-height: 60rpx;
				line-height: 60rpx;
				border: 1rpx solid #ddd;
				border-radius: 10rpx;
				padding: 0 20rpx;
			}
		}

		.btn_box {
			margin-top: 40rpx;
			display: flex;
			background-color: #fff;
			border-top: 1rpx solid #ddd;

			.btn {
				line-height: 80rpx;
				flex: 1;
				overflow: hidden;
				text-align: center;

				&.btn_l {
					border-right: 1rpx solid #ddd;
				}
			}
		}
	}

	.filter_box {
		padding: 20rpx 30rpx 0;

		.filter_item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #ddd;

			&:last-of-type {
				border: none;
			}

			.fi_label {
				font-weight: bold;
			}

			.fi_val {
				text-align: right;
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;

				.view {
					flex: 1;
					overflow: hidden;
					color: #666;
				}

				.iconfont {
					color: #999;
				}
			}
		}
	}
</style>
